<template>
  <div class="carousel">
    <button @click="prevItem">上页</button>
    <div class="carousel-inner">
      <div
        v-for="(item, index) in carouselItems"
        :key="index"
        :class="{ 'carousel-item': true, active: index === currentIndex }">
        <div class="c2">
          {{ item }}
        </div>
      </div>
    </div>
    <button @click="nextItem" class="next-button">下页</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      carouselItems: [
        '根据“东北林业大学本科教育教学审核评估专项检查调研工作”的相关通知要求，为深入推动我校本科教育教学审核评估自评自建工作的进程，精准查找各教学单位在教学基本材料中存在的短板与不足，2024年12月5日，校评建办组织专家组在成栋楼926会议室，以计控学院为试点学院对我校本科教育审核评估推进情况进行检查调研。',
        '寒影初临映赛场，初冬悄至志高昂。计算机与控制工程学院师生羽毛球比赛圆满落下帷幕！让我们一同走进这片热血的赛场，感受青春的激情与力量!本次比赛由计算机与控制工程学院主办，体育部教师梁福生、张瑜协助规划比赛相关事宜。张瑜老师担任裁判长，全体裁判员以专业的素养和公正的态度掌控全场比赛进程，确保比赛有条不紊、顺利进行。',
        '为加强学院生涯教育和就业指导，增强学生职业规划意识，指导其及早做好就业准备，以择业新观念打开就业新天地，11月14日中午，计算机与控制工程学院在成栋1016举办第二届大学生职业生涯规划大赛。本次大赛以“逐梦青春 职绘未来”为主题，分为成长和就业两个赛道，由学院党委副书记、副院长庄雯培及全体辅导员担任评委。',
        '为进一步巩固招生宣传成果，优化宣传方式，持续推进学校本科招生宣传工作，帮助新生更好地适应大学生活，计算机与控制学院于11月14日在成栋楼1014会议室召开安徽省和江苏省新生座谈会。招生宣传联络人董光辉、王伟男和安徽省、江苏省2024级本科新生等参加了会议，会议由王伟男主持。',
        '2024年11月13日下午，在传统意义上的“金九银十”就业高峰期刚刚结束之际，计算机与控制工程学院在成栋楼1014会议室召开2025届毕业生第一次就业工作推进会。此次会议旨在全面贯彻落实党中央、国务院关于高校毕业生就业工作的决策部署，为2025届毕业生高质量就业谋篇布局。学院副院长李丹，党委副书记、副院长庄雯培，各专业主任及分管就业工作副主任，毕业班辅导员，就业办公室参加会议，会议由学院就业办公室主任孙海龙主持。'
      ],
      currentIndex: 0,
      intervalId: null
    }
  },
  methods: {
    nextItem() {
      this.updateIndex(1)
    },
    prevItem() {
      this.updateIndex(-1)
    },
    updateIndex(step) {
      const maxIndex = this.carouselItems.length - 1
      this.currentIndex = (this.currentIndex + step + maxIndex + 1) % (maxIndex + 1)
    },
    startAutoPlay() {
      this.intervalId = setInterval(() => {
        this.nextItem()
      }, 10000) // 每10秒切换一次
    },
    stopAutoPlay() {
      if (this.intervalId) {
        clearInterval(this.intervalId)
        this.intervalId = null
      }
    }
  },
  mounted() {
    this.startAutoPlay()
  },
  beforeDestroy() {
    this.stopAutoPlay()
  }
}
</script>

<style scoped>
.carousel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
  background-image: url('../../public/606.jpg');
  background-size: cover;
}

.carousel-inner {
  flex-grow: 1;
  display: flex;
  overflow: hidden;
  width: 100%;
  height: 120px;
}

.carousel-item {
  width: 100%;
  flex-shrink: 0;
  text-align: center;
  padding: 20px;
  margin-right: 10px;
  display: none; /* 默认不显示 */
  white-space: normal; /* 允许文本自动换行 */
  word-wrap: break-word; /* 允许长单词或无法拆分的URL强制换行 */
  overflow: hidden; /* 如果内容超出容器高度，则隐藏超出部分 */
}

.carousel-item.active {
  display: block; /* 只显示当前活动的轮播图 */
  height: auto; /* 根据内容自动调整高度 */
}

button {
  margin: 10px;
  padding: 5px 10px;
  background-color: rgb(214, 248, 182);
}

.next-button {
  position: relative;
}
</style>
